<template>
  <Portlet title="商品信息" style="position:relative;">
    <el-table
      border
      max-height="500"
      :data="value"
      :header-cell-style="{'text-align': 'center'}"
      :cell-style="{'text-align': 'center'}"
    >
      <el-table-column
        prop="manufacturersName"
        align="center"
        label="厂家名称"
        min-width="120px"
      >
      </el-table-column>
      <el-table-column
        min-width="120px"
        prop="productNo"
        align="center"
        label="产品编号"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="productName"
        min-width="120px"
        label="商品名称">
      </el-table-column>
      <el-table-column
        align="center"
        prop="bigClass"
        min-width="120px"
        label="商品大类">
      </el-table-column>
      <el-table-column
        align="center"
        prop="middleClass"
        min-width="120px"
        label="商品小类">
      </el-table-column>
      <el-table-column
        align="center"
        prop="productNum"
        min-width="120px"
        label="商品数量">
      </el-table-column>
      <el-table-column
        v-if="productType == 1"
        align="center"
        prop="standard"
        min-width="110px"
        label="规格">
      </el-table-column>
      <el-table-column
        v-if="productType == 1"
        align="center"
        prop="packageCode"
        min-width="120px"
        label="包件编号">
      </el-table-column>
      <el-table-column
        v-if="productType == 1"
        align="center"
        prop="packageName"
        min-width="130px"
        label="包件名称">
      </el-table-column>
      <el-table-column
        align="center"
        prop="num"
        min-width="100px"
        label="包件数量">
      </el-table-column>
      <el-table-column
        v-if="productType == 1"
        prop="packageOneVolume"
        min-width="120px"
        label="单包件体积">
        <!--<template slot-scope="scope">-->
          <!--{{ scope.row.volume | decimalNumFilter}}-->
        <!--</template>-->
      </el-table-column>
      <el-table-column
        v-if="productType == 1"
        min-width="120px"
        prop="packageOneWeight"
        label="单包件重量">
      </el-table-column>
      <el-table-column
        v-if="productType == 1"
        min-width="100px"
        prop="unit"
        label="包件单位">
      </el-table-column>
      <slot></slot>
    </el-table>
    <div style="position:absolute;left:140px;top:17px;font-size:14px;color:red">商品类型： {{getProductName(productType)}}</div>
    <el-row style="margin-top:15px;font-size:14px">
     <el-col :span="6">
       总包件：<span> {{totalInfo.totalPackage}} 件</span>
     </el-col>
     <el-col :span="6">
       总体积：<span> {{totalInfo.totalVolume}} m³</span>
     </el-col>
     <el-col :span="6">
       总重量：<span> {{totalInfo.totalWeight}} kg</span>
     </el-col>
    </el-row>
  </Portlet>
</template>
<script>
import {decimalNumFilter} from '@/filters'
export default {
  props: {
    value: {
      type: Array,
      default() {
        return []
      }
    },
    // 标准产品1，通用产品2==自定义产品3
    productType: {
      type: [String, Number],
      default: 1
    },
    totalInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
    }
  },
  computed: {
    // 总包件：num累加
    totalPackage() {
      let num = 0
      if (Array.isArray(this.value)) {
        this.value.forEach(v => {
          num += v.num
        })
      }
      return decimalNumFilter(num)
    },
    // 总体积：单包件*num
    totalVolumes() {
      let num = 0
      if (Array.isArray(this.value)) {
        this.value.forEach(v => {
          num += (v.packageOneVolume * v.num)
        })
      }
      return decimalNumFilter(num)
    },
    // 总重量：单重量*num
    totalWeight() {
      let num = 0
      if (Array.isArray(this.value)) {
        this.value.forEach(v => {
          num += v.packageOneWeight * v.num
        })
      }
      return decimalNumFilter(num)
    }
    // 出库包件字段和默认的入库包件字段不一样时，映射
    // innerValue() {
    //   if (this.columnMap === false) {
    //     return this.value
    //   }
    //   let temp = []
    //   for (let v of this.value) {
    //     for (let k in this.columnMap) {
    //       v[k] = v[this.columnMap[k]]
    //     }
    //     temp.push(v)
    //   }
    //   return temp
    // }
  },
  methods: {
    getProductName(type) {
      if (type === 1) {
        return '标准产品'
      } else if (type === 2) {
        return '通用产品'
      } else if (type === 3) {
        return '自定义产品'
      }
      return ''
    }
  }
}
</script>
